<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>addEventListener</title>
    <link rel="stylesheet" href="../../styles/normalize.css" />
  </head>
  <body>
    <button id="example-button">You have not clicked this button.</button>
    <button id="reset-button">
      Click this button to reset the first button.
    </button>

    <script>
      /**
       * 拥有多个 option 的监听器, options有多个key
       */
      const buttonToBeClicked = document.getElementById("example-button");

      const resetButton = document.getElementById("reset-button");

      // 示例按钮的初始文本
      const initialText = buttonToBeClicked.textContent;

      // 点击示例按钮后显示的文本
      const clickedText = "You have clicked this button.";

      // 我们将事件监听器函数单独提出，以防止重复添加监听函数
      function eventListener() {
        buttonToBeClicked.textContent = clickedText;
      }

      function addListener() {
        buttonToBeClicked.addEventListener("click", eventListener, {
          passive: true,
          once: true,
        });
      }

      // 当点击重置按钮后，示例按钮将被重置，并可以再次更新它自身的状态
      resetButton.addEventListener("click", () => {
        buttonToBeClicked.textContent = initialText;
        addListener();
      });

      addListener();
    </script>
  </body>
</html>
